<template>
  <div>
  
    <baseForm label-width="100px" :formData="formData"  @sendForm="getForm">
        <template #formtitle>角色查询表单</template>
    </baseForm>
     <div class="btn_wrap">
       <el-button  type="primary" @click="open" plain :icon="Plus">增加</el-button>
       <el-button type="success"  plain :icon="Edit">修改</el-button>
       <el-button   type="danger" plain :icon="Delete">删除</el-button>
       <el-button  type="warning" plain :icon="Download">导出</el-button>
     </div>
  </div>
   <div>
    <el-table border stripe :data="roleList">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="roleId" label="角色编号"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleKey" label="权限字符"></el-table-column>
      <el-table-column prop="roleSort" label="显示排序"></el-table-column>
      <el-table-column label="状态">
          <template #default="{row}">
              <el-switch v-model="row.status" active-value="0" inactive-value="1"></el-switch>
          </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="操作">
        <template #default >
               <el-link  :icon="Edit" type="primary">修改 </el-link>  
                  <el-link style="margin: 0 10px;" :icon="Delete" type="primary" >删除 </el-link>   
                 
                  <el-dropdown>
                        <el-link style="margin-top: 5px;" :icon="DArrowRight" type="primary">更多 </el-link>  

                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item>
                                 <el-link :icon="Delete" type="primary">数据权限 </el-link>  
                              </el-dropdown-item>
                               <el-dropdown-item>
                                 <el-link :icon="Delete" type="primary">分配用户 </el-link>  
                              </el-dropdown-item>
                            </el-dropdown-menu>
                         
                           
                          </template> 
                  </el-dropdown>
       

        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev,pager,next,jumper,sizes,total" :total="100"></el-pagination>
   </div>
   <!-- 添加角色的弹出层 -->
    <addRole ref="addRoleRef" @uplist="getList"></addRole>
</template>
<script setup>
import baseForm from '@/components/Form/index.vue'
import {Edit,Plus,Delete,Download,DArrowRight} from '@element-plus/icons-vue'
import {listRole} from '@/api/system/role'
import addRole from './addRole.vue'
import {ref} from 'vue' 
  let formData = ref([
    {
      type: "input",
      label: "角色名称",
      placeholder: "请输入角色名称",
      field: "roleName"
    },
    {
      type: "input",
      label: "权限字符",
      placeholder: "输入权限字符",
      field: "roleKey"
    },
    {
      type: "select",
      label: "状态",
      placeholder: "输入选择状态",
      field: "status",
      options: [{ value: "0", label: "启用" }, { value: "1", label: "停用用" }]
    },
    {
      type: "date",
      label: "创建时间",
      placeholder: "请选择创建时间",
      field: "createTime"
    }
  ])
  let getForm=(queryForm)=>{
    console.log(queryForm,"父组件中获取了 子组件收集的数据")

    getList(queryForm) //将封装的表单组件 收集的数据 直接传给列表接口
  }
  let roleList=ref([])//角色列表
  let getList=async (queryForm={})=>{
    let res=await listRole(queryForm);
    console.log(res,"获取角色列表")
    roleList.value=res.rows;
  }
  getList()
 let addRoleRef=ref(null)
  let open=()=>{ //获取子组件  操作子组件的数据
      addRoleRef.value.roleFlag=true;
  } 
</script> 